import { memo } from 'react';
import { Handle, Position } from '@xyflow/react';
import { GitBranch, Webhook, Mail, Calendar, Code2 } from 'lucide-react';

const iconMap = {
  github: GitBranch,
  webhook: Webhook,
  mail: Mail,
  calendar: Calendar,
  default: Code2,
};

interface TriggerNodeData {
  label: string;
  subtitle: string;
  icon: string;
}

interface TriggerNodeProps {
  data: TriggerNodeData;
  id: string;
}

export const TriggerNode = memo(({ data }: TriggerNodeProps) => {
  const IconComponent = iconMap[data.icon as keyof typeof iconMap] || iconMap.default;
  
  return (
    <div className="workflow-node workflow-node-trigger min-w-[200px] text-white">
      <div className="flex items-center gap-3 p-3">
        <div className="bg-white/20 p-2 rounded-lg">
          <IconComponent className="w-5 h-5" />
        </div>
        <div className="flex-1 min-w-0">
          <div className="font-semibold text-sm">{data.label}</div>
          <div className="text-xs opacity-90">{data.subtitle}</div>
        </div>
      </div>
      
      <div className="px-3 pb-2">
        <div className="text-xs opacity-75">
          🚀 Trigger Event
        </div>
      </div>
      
      <Handle
        type="source"
        position={Position.Right}
        className="workflow-handle"
        style={{ right: -6 }}
      />
    </div>
  );
});